<template>
    <div :class="{'is-fixed': isFixedClass}">
      <!-- header -->
      <header>
        <div class="top-content clearfix">
          <div class="w-1200 clearfix">
            <div class="left-cont fl">
              <a href="javascript:void(0);" class="top-code-link"><i class="icon img-tel"></i>
                手机客户端
                <!-- 二维码 -->
                <div class="top-code-box">
                  <div class="top-code">
                    <img v-if="platformConfig && platformConfig.qrcode_url" :src="imgRequest + platformConfig.qrcode_url" alt="">
                  </div>
                </div>
              </a>
              <span v-for="(item, index) in botNavList" :key="index" v-if="item.name == '取款帮助' || item.name == '防劫持教程'">
                <em>|</em><router-link :to="{path: '/article/page', query: {type: item.type}}">{{item.name == '取款帮助' ? '帮助中心' : item.name}}</router-link>
              </span>
            </div>

            <div class="right-cont fr" :class="!userInfo.username ? 'notLog' : userInfo.username ? 'logged' : ''">
            <!-- <div class="right-cont fr notLog"> -->
              <!-- 未登录 -->
              <div class="logInfo" v-if="!userInfo.username">
                <p class="wel-tips">您好，欢迎来到{{platformConfig.platform_name}}！</p>
                <a href="javascript:void(0);" class="top-btn btn-red" @click="login">登录</a>
                <a href="javascript:void(0);" class="top-btn btn-blue" @click="register">注册</a>
                <a href="javascript:void(0);" class="top-btn btn-orange" @click="mydemo(loginInfo)">游客试玩</a>
                <em>|</em>
                <a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank">客服中心</a>
              </div>
              <!-- 已登录 -->
              <div class="logInfo" v-if="userInfo.username">
                <a href="javascript:void(0);" @mouseover="showQd=true" @mouseout="showQd=false" v-if="closeQd"><img src="@/assets/images/qd.gif" alt="" class="head-qd"> {{getQdObj.qdState==0?'每日签到':'已签到'}}
                  <div class="qdPanel" v-show="showQd">
                    <div>
                      <Steps :current="getQdObj.qdCurrent">
                        <Step :content="qdMoney+'元宝'"></Step>
                        <Step :content="qdMoney+'元宝'"></Step>
                        <Step :content="qdMoney+'元宝'"></Step>
                        <Step :content="qdMoney+'元宝'"></Step>
                        <Step :content="qdMoney+'元宝'"></Step>  
                        <Step :content="qdMoney+'元宝'"></Step>
                        <Step :content="moneyBal+'元宝'"></Step>
                      </Steps>
                      <div class="qdCtr">
                        <p v-html="qdText"></p>
                        <Button type="error" @click="setQd" :loading="qdLoading" v-if="getQdObj.qdState==0">签到</Button>
                        <Button type="error" v-else>已签到</Button>
                      </div>
                    </div>
                  </div>
                </a>
                <em v-if="closeQd">|</em>
                <a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank">客服中心</a>
                
                <router-link to="/leaderBoard" v-if="showHeroList"><em>|</em><img src="@/assets/images/rankinglist.png" alt="" style="vertical-align: middle;"> 英雄榜</router-link>
                <em>|</em>
                <router-link :to="{path: '/personalCenter/announcement', query: {query:Date.parse(new Date())}}"><i  class="icon img-mes"><em v-if="userInfo.un_read_msg" class="red-dot"></em></i>平台公告</router-link>
                <em>|</em>
                <router-link :to="{path: '/personalCenter/personalInfo', query: {query:Date.parse(new Date())}}"><i class="icon img-person"></i>{{userInfo.username}}</router-link>
                <span style="margin-left:10px;">余额: <i class="c-orange">{{accountData?accountData.money_usable:0.00}}</i></span>
                <a href="javascript:void(0)" @click="conditional('recharge')" class="top-btn btn-red">充值</a>
                <a href="javascript:void(0)" @click="conditional('withdraw')" class="top-btn btn-blue">提现</a>
                <a href="javascript:void(0)" v-if="casinoSwitch && casinoSwitch.status == 1" @click="conditional('moneyTransform')" class="top-btn btn-orange">额度转换</a>
                <em>|</em>
                <a href="javascript:void(0);" @click="exitLogin">退出</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <nav class="box clearfix">
        <div class="w-1200 clearfix flexBox">
          <div class="left-cont clearfix fl">
            <div @click="skipHome" class="logo-box"><img v-if="platformConfig && platformConfig.pc_logo" :src="imgRequest + platformConfig.pc_logo" alt=""></div>
          </div>
          <div class="right-cont fr">
            <ul class="nav-list">
              <li @mouseout="myFor" @mouseover="myForShow">
                <router-link to="/home">购彩大厅<span class="icon white-arrow"></span></router-link>
                <transition name="fadeUp">
                <div class="lobbyBox" v-show="myFlag" @mouseout="myFlag=false" @mouseover="myFlag=true">
                  <div class="lobby">
                    <Row type="flex" justify="start">
                      <div v-for="(d,index) in lottery_list" :key="index" class="nav-item">
                        <h2><img :src="imgRequest + d.pic_url_pc_logo" alt=""> {{d.name}}</h2>
                        <div class="link-item">
                          <span v-for="(b,index1) in d.roomList" :key="index1">
                            <a href="javascript:void(0);" @click="goRoom(d.pic_url_pc_logo,d.roomList[index1])" :title="b.title">{{b.title}}</a>
                          </span>
                        </div>
                      </div>
                    </Row>
                  </div>
                </div>
                </transition>
              </li>
              <li @mouseout="showGameDlg=false" @mouseover="showGameDlg=true" v-if="casinoSwitch && casinoSwitch.status == 1">
                <a>真人娱乐<span class="icon white-arrow"></span></a>
                <transition name="fadeUp">
                <div class="lobbyBox lobbyBox2" v-show="showGameDlg" @mouseout="showGameDlg=false" @mouseover="showGameDlg=true">
                  <div class="lobby">
                    <Row type="flex" justify="start">
                      <div v-for="(item, index) in casinoList" :key="index" class="gameBox" @click="showGameFun(item.game_flag,item.game_name,item.game_plat_id)">
                        <img :src="imgRequest+item.pc_pic" alt="" v-if="item.pc_pic">
                        <img v-else src="@/assets/images/moren1.png" alt="">
                        <Button type="error">进入游戏</Button>
                      </div>
                    </Row>
                  </div>
                </div>
                </transition>
              </li>
              <li><a href="javascript:void(0);" @click="goZouShi">开奖结果</a></li>
              <li><router-link to="/activityCenter">活动中心</router-link></li>
              <li><router-link to="/taskCenter">任务中心</router-link></li>
              <li><router-link to="/downLoad">手机APP</router-link></li>
              <li v-if="userInfo.username"><router-link :to="{path: '/personalCenter/personalInfo', query: {query:Date.parse(new Date())}}"><span class="icon user-icon"></span>用户中心</router-link></li>
            </ul>
          </div>
        </div>   
        
      </nav>     
      <!-- nav -->
      <!-- 注册弹窗 -->
      <Modal title="会员注册" :scrollable="true" v-model="registerShow" :mask-closable="false" width="400" class-name="" @on-cancel="registerCancel">
        <div v-if="loading">
            <Spin fix size="large"></Spin>
        </div>
        <Form v-else ref="registerInfo" :model="registerInfo" :rules="registerrule" :label-width="80" label-position="right">
          <FormItem label="账号" prop="userName">
              <Input :maxlength="15" placeholder="请输入6-15位且必须包含英文和数字的账号" v-model="registerInfo.userName" ref="username"></Input>
          </FormItem>
          <FormItem label="密码" prop="psd">
              <Input :maxlength="15" type="password" placeholder="请输入6-15位且必须包含英文和数字的密码" v-model="registerInfo.psd"></Input>
          </FormItem>
          <FormItem label="确认密码" prop="confirmPsd">
              <Input :maxlength="15" type="password" placeholder="请输入确认密码" v-model="registerInfo.confirmPsd" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
          <FormItem label="QQ号码" prop="qq" v-if="OptionalItems.qq">
            <Input placeholder="请输入您的QQ" v-model="registerInfo.qq" ref="qq" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
          <FormItem label="微信" prop="weixin" v-if="OptionalItems.weixin">
            <Input placeholder="请输入您的微信" v-model="registerInfo.weixin" ref="weixin" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
          <FormItem label="手机号码" prop="mobile" v-if=" OptionalItems.mobile">
            <Input :maxlength="11" placeholder="请输入您的手机号码" v-model="registerInfo.mobile" ref="mobile" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
          <FormItem label="邮箱" prop="email" v-if="OptionalItems.email">
            <Input placeholder="请输入您的邮箱" v-model="registerInfo.email" ref="email" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
          <FormItem label="真实姓名" prop="realname" v-if="OptionalItems.realname">
            <Input placeholder="请输入您的真实姓名" v-model="registerInfo.realname" ref="realname" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
          <FormItem label="验证码" prop="register" v-if="OptionalItems.register" class="registerInfo-code">
            <Input placeholder="请输入您的验证码" v-model="registerInfo.register" ref="register" @keyup.enter.native="registerNow('registerInfo')"></Input>
            <img :src="codeUrl" class="verificationCode" @click="verificationCode">
          </FormItem>
          <FormItem label="推荐人" prop="referrercode" class="last-item">
            <Input v-model="registerInfo.referrercode" placeholder="请输入介绍人(可不填)" ref="referrerCode" @keyup.enter.native="registerNow('registerInfo')"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="error" size="large" :loading="btnLoading" long @click="registerNow('registerInfo')">
            <span v-if="!btnLoading">立即注册</span>
            <span v-else>注册中...</span>
          </Button>
          <div class="autolog-box clearfix">
            <p class="text-center" ><a href="javascript:void(0)" @click="jumpToLogin">已有账号？去登录</a></p>
          </div>
          <div class="third-party" style="display:none">
            <div class="t-title">第三方账号登录</div>
            <div class="t-con">
              <a href="javascript:void(0);"  class="icon-qq"></a>
              <a href="javascript:void(0);"  class="icon-wx"></a>
              <a href="javascript:void(0);"  class="icon-xl"></a>
            </div>
          </div>
        </div>
      </Modal>
      <!--注册弹窗 -->
      <!-- 登录弹窗 -->
      <Modal title="会员登录" class="vertical" :scrollable="true" v-model="loginShow" :mask-closable="false" width="400" class-name="">
        <Form ref="loginInfo" :model="loginInfo" :rules="loginrule" :label-width="40" label-position="left">
          <FormItem label="账号" prop="loginUserName">
              <Input placeholder="请输入账号" v-model="loginInfo.loginUserName" @keyup.enter.native="loginNow('loginInfo')"></Input>
          </FormItem>
          <FormItem label="密码" prop="loginPsd">
              <Input type="password" placeholder="请输入密码" v-model="loginInfo.loginPsd" @keyup.enter.native="loginNow('loginInfo')"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="error" autofocus size="large" :loading="btnLoading" long @click="loginNow('loginInfo')">
            <span v-if="!btnLoading">立即登录</span>
            <span v-else>登录中...</span>
          </Button>
          <div class="autolog-box clearfix">
  				  <label for="" class="fl"><Checkbox v-model="rememberPsd">记住密码</Checkbox></label>
            <p class="fr"><a :href="service == '暂无' ? 'javascript:void(0);' : service" target="_blank">忘记密码？</a> | <a href="javascript:void(0)" @click="jumpToRegister">注册</a></p>
            <!-- <a href="###" @click="jumpToService">忘记密码</a> <span>|</span> 后续添加在注册前面 -->
  			  </div>
          <div class="third-party" style="display:none">
            <div class="t-title">第三方账号登录</div>
            <div class="t-con">
              <a href="javascript:void(0);"  class="icon-qq"></a>
              <a href="javascript:void(0);"  class="icon-wx"></a>
              <a href="javascript:void(0);"  class="icon-xl"></a>
            </div>
          </div>
        </div>
      </Modal>
      <Modal
        v-model="passwdModel"
        title="请输入房间密码"
        :mask-closable="false"
        @on-ok="PrivacyRoom"        
        @on-cancel="passwdModel = false"
        width="334"
        >
        <Input v-model="passwdModelvalue" type="password" placeholder="请输入房间密码" style="width: 300px" @on-keyup.13="PrivacyRoom"></Input>
      </Modal>
      <div class="shadel" v-show="popUp">
        <!-- popUp -->
        <div class="popUp">
          <div class="popUpTop">
            <h2>
              <span>平台公告</span>
              <span class="cancel" @click="cancel"></span>
            </h2>
          </div>
          <div class="popUpContent">
            <h2 class="h2Title">{{title}}</h2>
            <div class="content">{{content}}</div>
            <p class="addtime">{{addtime}}</p>
          </div>
          <!-- <div class="flexBox">
            <Row type="flex" justify="center" class="code-row-bg">
              <Col span="20" order="4">
                <h2 class="camp title">{{title}}</h2>
                <p class="camp content">{{content}}</p>
                <p class="camp addtime">{{addtime}}</p>
              </Col>
            </Row>
          </div> -->
        </div>
      </div>
      <gameBoxDlg :showGameBox="showGameBox" :gameDlgData="gameDlgData" v-on:changeGameDlg="changeGameDlg" v-on:showGameFun="showGameFun"></gameBoxDlg>
    </div>
</template>
<script>
import formatDate from '../../common/js/date.js';
import { jsonToString } from "@/common/js/jsonToString";
import { mapGetters, mapActions } from "vuex";
import loginStore from "@/store/loginStore";
import { fetchJson } from "@/common/js/request";
import router from "@/router";
import gameBoxDlg from './gameBoxDlg'
//QQ验证
const validateQQ = (rule, value, callback) => {
	if (rule.required && !value) {
		callback(new Error("QQ不能为空"));
	// } else if (!/^[1-9]{1}[0-9]{4,}$/.test(value)) {
	// 	callback(new Error("输入的QQ号码格式错误！"));
	} else {
		callback();
	}
};
//微信验证
const validateWeixin = (rule, value, callback) => {
	if (rule.required && !value) {
		callback(new Error("微信不能为空"));
	// } else if (!/^[a-zA-Z0-9_-]{3,30}$/.test(value)) {
	// 	callback(new Error("输入的微信格式错误！"));
	} else {
		callback();
	}
};
//手机验证
const validateMobile = (rule, value, callback) => {
	if (rule.required && !value) {
		callback(new Error("手机号码不能为空"));
	} else if (!/^[0-9]{11}$/.test(value)) {
		callback(new Error("输入的手机号码格式错误！"));
	} else {
		callback();
	}
};
//邮箱验证
const validateEmail = (rule, value, callback) => {
	if (rule.required && !value) {
		callback(new Error("邮箱不能为空"));
	} else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
		callback(new Error("输入的邮箱格式错误！"));
	} else {
		callback();
	}
};
//真实姓名验证
const validateRealname = (rule, value, callback) => {
	if (rule.required && !value) {
		callback(new Error("真实姓名不能为空"));
	} else {
		callback();
	}
};
//验证码验证
const validateRegister = (rule, value, callback) => {
	if (rule.required && !value) {
		callback(new Error("验证码不能为空"));
	} else {
		callback();
	}
};
export default {
  props:{
    tipsFunText:{ //公告弹窗
      type: Number,
      default: 0
    }
  },

  data() {
    //账号验证
    const validateUserName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("账号不能为空"));
      } else if (!/^[0-9a-z]{6,15}$/i.test(value)) {
        callback(new Error("请输入6-15位且必须包含英文和数字的账号"));
      } else if (value == this.userName) {
        callback(new Error("账号已存在"));
      } else {
        callback();
      }
    };
    //密码验证
    const validatePsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(value)) {
        callback(new Error("请输入6-15位且必须包含英文和数字的密码"));
      } else {
        if (this.registerInfo.confirmPsd !== "") {
          this.$refs.registerInfo.validateField("confirmPsd");
        }
        callback();
      }
    };
    //确认密码验证
    const validateConfirmPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入确认密码"));
      } else if (value !== this.registerInfo.psd) {
        
        callback(new Error("两次密码输入不一致"));
      } else {
        callback();
      }
    };
    //推荐人验证
    const validateReferrercode = (rule, value, callback) => {
      if (value == this.referrer && value !== "") {
        callback(new Error("推荐人不存在"));
      } else {
        callback();
      }
    };
    //登录验证
    const validateLoginUserName = (rule, value, callback) => {
      if (!value) {
        callback(new Error("账号不能为空"));
      }
      //  else if (!/^[0-9a-z]{6,15}$/i.test(value)) {
      //   callback(new Error("账号为6-15位字符，必须是字或字母"));
      // } 
      else {
        callback();
      }
    };
    const validateLoginPsd = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } 
      // else if (!/^(?![^a-zA-Z]+$)(?!\D+$).{6,15}$/.test(value)) {
      //   callback(new Error("请输入6-15位且必须包含英文和数字的密码"));
      // } 
      else {
        callback();
      }
    };
    return {
      isUser: JSON.parse(localStorage.getItem("isUser")),
      showGameBox: false,
      gameDlgData: {},
      isFixedClass:false, //导航浮动
      earn_rate:"",
      addtime:"",
      title:"",
      item:[],
      id:"",
      content:"",
      popUp: false,
      withdrawTotal:"",
      myFlag:false,
      showGameDlg: false,
      lottery_list:[],
      rememberPsd: false, //记住密码
      OptionalItems:{}, //注册选项是否显示
      Optstate:null, //1表示必填 0表示选填
      loading:true, //注册界面加载
      showDrop: false, //菜单是否显示下拉
      //注册信息
      registerInfo: {
        userName: "",
        psd: "",
        confirmPsd: "",
        qq: "",
        weixin: "",
        mobile: "",
        email: "",
        realname: "",
        register: "",
        referrercode: ""
      },
      referrer: "",
      registerrule: {
        psd: [{ validator: validatePsd, trigger: "blur", required: true }],
        confirmPsd: [{ validator: validateConfirmPsd, trigger: "blur", required: true }],
        userName: [{ validator: validateUserName, trigger: "blur", required: true }],
        referrercode: [{ validator: validateReferrercode, trigger: "blur" }]
      },
      //登录信息
      loginInfo: {
        loginUserName: localStorage.getItem('userName'),
        loginPsd: localStorage.getItem('password'),
      },
      loginrule: {
        loginUserName: [{ validator: validateLoginUserName, trigger: "blur" }],
        loginPsd: [{ validator: validateLoginPsd, trigger: "blur" }]
      },
      // 注册
      registerShow: false, //注册页面的显示
      //登录
      loginShow: false, //登录页面弹窗显示
      checkedTrue: true, //记住账号
      //用户数据
      personInfo: false,
      // service:""
      passwdModel:false,
      passwdModelvalue:null,
      passwdModelSendMes:null,
      qdText:'',//签到描述
      showQd: false,
      qdLoading: false,
      moneyBal: 0,
      qdMoney:0,
      closeQd: false,

      btnLoading: false, //按钮loadding
      codeUrl: '', //注册验证码
      isTourist: false,

      botNavList: [], //底部菜单列表
      casinoList: [],
      gameList: [],

      casinoSwitchStatus: false,
      showHeroList: false,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll); //导航浮动
    var that = this
    this.$http.post(this.urlRequest + "?m=win&c=lobby&a=getRoomList").then(res=>{
      that.lottery_list = res.data.data.room_list
      for(var i=0;i<that.lottery_list.length;i++){
        if(that.lottery_list[i].lotteryId==12){
          that.lottery_list.splice(i, 1)
        }
      }
    })
    this.$http.post(this.urlRequest + "?m=api&c=lobbynew&a=indexSim").then(res=>{
      res=res.data
      if (res.status == 0) {
        this.casinoList = res.data.live_casino_list
      }
    })
  },
  watch:{
    registerShow(boolean){ //注册选项是否显示
      if(boolean && !this.OptionalItems.email){
        this.register();
      }
    },
    tipsFunText(number){ //公告弹窗
      if(number>0){
        this.tipsFun();
        // this.$emit("tipsFunFlag",true);
        // this.tipsFunText = false;
      }
    },
    accountData(obj) {
			if (obj.is_tourist && obj.is_tourist != 1) {
        this.isTourist = true;
			} else {
        this.isTourist = false;
      }
		},
    userInfo(obj) {
      if(!_.isEmpty(obj.username)){
        this.closeQd = false
        fetchJson(this, this.urlRequest + '?m=api&c=app&a=getSignCont',{}).then(result=>{
          if(result.status == 0){
            this.closeQd = true
            // return

            //获取签到数据
            this.qdText = result.data.explain
            var qdObj = this.getQdObj
            qdObj.qdCurrent=result.data.count
            qdObj.qdState=result.data.is_sign
            qdObj.qdMoney = this.qdCurrent==6?result.data.money_bal:result.data.money
            this.moneyBal=result.data.money_bal
            this.qdMoney=result.data.money
            this.$store.commit('setQdObj',qdObj)
            if(qdObj.qdState==0&&JSON.parse(localStorage.getItem('isUser'))){
              var vm = this;
              setTimeout(function(){
                vm.showQd=true
              },200)
            }
          }
          
        });
      }
    },
    Optstate(val){ //注册弹窗QQ 微信 手机 邮箱 是否显示必填
      if(val){
        this.registerrule.qq = [{ validator: validateQQ, trigger: "blur", required: this.Optstate }],
        this.registerrule.weixin = [{ validator: validateWeixin, trigger: "blur", required: this.Optstate }],
        this.registerrule.mobile = [{ validator: validateMobile, trigger: "blur", required: this.Optstate }],
        this.registerrule.email = [{ validator: validateEmail, trigger: "blur", required: this.Optstate }],
        this.registerrule.realname = [{ validator: validateRealname, trigger: "blur", required: this.Optstate }],
        this.registerrule.register = [{ validator: validateRegister, trigger: "blur", required: this.Optstate }]
      }
    }
  },
  components: {gameBoxDlg: gameBoxDlg},
  computed: {
    ...mapGetters(["userInfo", "accountData", "isLogin", 'service','getQdObj','platformConfig','casinoSwitch'])
  },
  created () {
    this._getService();
    this.wotal();
    this._getplatformConfig();
    this._getBotNavList();
  },
  methods: {
    changeGameDlg(flag){
      this.showGameBox=flag
    },
    showGameFun(game_flag,game_name,game_plat_id){
      if (!localStorage.getItem("token")) {
        this.$Modal.warning({
          content: "您还未登录，请先登录",
          scrollable: true,
          onOk: () => {
            var vm = this;
            setTimeout(() => {
              vm.$router.push({ path: "/login" });
            }, 1000);
          }
        });
        return false;
      }
      if (!JSON.parse(localStorage.getItem("isUser"))) {
        this.$Message.warning("游客暂无权限，请先注册会员");
        return false;
      }
      this.gameDlgData={
        game_flag,
        game_name,
        game_plat_id,
        game_money: this.accountData.game_money?JSON.parse(this.accountData.game_money)[game_flag]:0,
        money_usable: this.accountData.money_usable,
      }
      this.showGameBox=true
    },
    setChildShow(flag,index){
      var str = 'gameNav'+index
      var child = this.$refs[str][0].lastElementChild.children[0]
      var parent = this.$refs[str][0].lastElementChild
      parent.style.width=child.children.length*170+'px'
      if(parseInt(parent.style.width)>660){
        parent.style.left=-(660/2-67)+'px'
      }else{
        parent.style.left=-(parseInt(parent.style.width)/2-67)+'px'
      }
      if(flag){
        child.style.display='flex'
        parent.style.display='block'
      }else{
        child.style.display='none'
        parent.style.display='none'
      }
      console.log(this.$refs[str])
    },
    _getBotNavList() {
      this.$http.post(this.urlRequest + "?m=api&c=app&a=listArticleColumn&type=2").then(res => {
          if (res.data.status == 0) {
            this.botNavList = res.data.data;
          }
      });
    },
    handleScroll(e){ //导航浮动
      if(window.pageYOffset > 102){
        this.isFixedClass = true;
      }else{
        this.isFixedClass = false;
      }
    },
    goRoom(roomLogo,item){
      if (!localStorage.getItem("token")) {
      // if (_.isEmpty(localStorage.getItem("userData"))) {
        this.$Modal.warning({
            content: '您还未登录，请先登录',
            scrollable: true,
            onOk: () => {
              var vm = this;
              setTimeout(() => {
                vm.$router.push({path:'/login'});
              }, 1000);
            }
        });
        return false;
      }
      if(item.status==1){
        this.$Message.warning('该房间已关闭');          
        return
      }
      var lottery_type = item.lottery_type
      if(lottery_type==12){
        this.$Message.info('暂未开放，敬请期待')
        return
      }
      var id = item.id
      var pwd = item.passwd
      var maxYb = parseInt(item.max_yb)
      var lowYb = parseInt(item.low_yb)
      var tips = item.lack_tips
      var userMoney = parseInt(this.accountData.money);
      if(pwd != '' && pwd != undefined){
        this.passwdModel = true
        this.passwdModelSendMes = item
        // console.log(this.passwdModelSendMes)
      }else{
        if(maxYb<userMoney || userMoney<lowYb){
          if(_.isEmpty(tips)){
            this.$Message.warning('进入失败，请稍后重试');
          }else{
            this.$Message.warning(tips);
          }      
            return false;
        }
        const {href} = this.$router.resolve({
          path:'/room/'+id,
          params: {id: id},
          query: {id: id,lottery_type: lottery_type}
          
        })
        var tempwindow=window.open()
        tempwindow.location= href
      }
    },
    PrivacyRoom(){//私密房间
      let that = this
      fetchJson(this,'?m=api&c=lobby&a=privateRoom',{lottery_type:that.passwdModelSendMes.lottery_type,secret_pwd:that.passwdModelvalue}).then(result=>{
          if(result.status===0){
            if(result.data.passwd===that.passwdModelvalue){
              localStorage.setItem('MdStory','私密房间')
              //密码正确
              router.push({
                name:"Room",
                path:'/room/'+result.data.id,
                params: { lottery_type:that.passwdModelSendMes.lottery_type,id:result.data.id},
                query: {id: result.data.id,lottery_type: that.passwdModelSendMes.lottery_type}
              },function(){
                location.reload()
              });
              
            }else{
              this.$Message.warning('房间密码错误');              
            }
          }else{
            this.$Message.warning('房间密码错误');
          }
        });
    },
    cancel() { //关闭平台公告
      this.popUp=false;
    },
    wotal() {
      this.$http.post(this.urlRequest + "?m=win&c=lobby&a=getHeaderFooter").then(res=>{
        this.SET_HEADER_FOOTER({
              obj: res.data.data
          });
        this.withdrawTotal = (res.data.data.fit_total+'') 
        this.earn_rate =res.data.data.earn_rate
        this.showHeroList=res.data.data.bet_rank_sw?true:false
      })
    },
    myFor() { //导航菜单下拉是否显示
      this.myFlag = false;
      this.showDrop = !this.showDrop
    },
    myForShow() { //导航菜单下拉是否显示
      this.myFlag = true;
      this.showDrop = !this.showDrop
    },
    conditional(type) {
      if (!JSON.parse(localStorage.getItem("isUser"))) {
        this.$Modal.warning({
            content: '游客暂无权限，请先注册会员',
            scrollable: true,
            onOk: () => {
              var vm = this;
              setTimeout(() => {
                vm.$router.push({path:'/reg'});
              }, 1000);
            }
        });
      } else {
        if (type == 'recharge') {
          this.$router.push({path:'/topUpCenter/recharge'});
        }
        if (type == 'withdraw') {
          this.$router.push({path:'/topUpCenter/withdraw'});
        }
        if (type == 'moneyTransform') {
          this.$router.push({path:'/topUpCenter/moneyTransform'});
        }
      }
    },
    _getService() { //获取客服链接
      this.$http.post(this.urlRequest + "?m=api&c=app&a=customerType").then(res => {
        var newData =  res.data.info;
        for(var i=0; i<newData.length; i++){
          if(newData[i].name == "link"){
            this.SET_SERVICE({
              String: newData[i].value
            }); 
          }
        }
     });
    },
    _getplatformConfig() { //平台配置信息
      this.$http.post(this.urlRequest +"?m=api&c=app&a=getPlatformConfig").then(res=>{
        if (res.data.status == 0) {
          this.SET_PLATFORM_CONFIG({
            obj: res.data.data
          });
        } else {
          this.$Message.error(res.data.ret_msg);
        }
      })
    },
    mydemo(loginInfo){ // 游客
      let params = {           
        flag: "4",
        code: "123",  
      };
      this.$http.post(this.urlRequest + "?m=api&c=user&a=registerMachine",params).then(res => {
        if (res.data.status == 0) {
          localStorage.setItem("token", res.data.token);
          localStorage.setItem("isLogin", true);
          localStorage.setItem("isUser", false);

          this.$http.post(this.urlRequest + "?m=api&c=user&a=userInfo", {token: res.data.token}).then(res => {
            this.SET_USER_INFO_DATA({
              Obj : res.data.data
            })
          })
          // this.SET_USER_INFO_DATA({
          //   Obj : res.data
          // })
          this.SET_ACCOUNT_DATA({
            Obj:{}
          })
          localStorage.setItem("userData", JSON.stringify(res.data));
          loginStore.commit("changeIsLogin", true);
          
          // this.SET_ISLOGIN({
          //   boolean: true
          // });
          this.$Message.success("登录成功!");
        } else {
          this.$Message.error(res.data.ret_msg);
        }
      }).catch(error => {
        this.$Message.error("数据请求超时");
      });
    },
    // Recharge: function () {
    //   this.$router.push({
    //     path: '/topUpCenter'
    //   });
    // },
    // Withdraw(){
    //   this.$router.push({
    //     path: '/topUpCenter/withdraw/present'
    //   });
    // },
    ...mapActions([
      'SET_HEADER_FOOTER',
      'SET_PLATFORM_CONFIG',
      "SET_ISLOGIN",
      "SET_SERVICE",
      'SET_USER_INFO_DATA',
      'SET_ACCOUNT_DATA',
      'SET_USER_DATA'
    ]),
    // jumpToPersonalCenter: function() { //点击用户跳转到个人中心
    //   this.$router.push({
    //     path: "/personalCenter",
    //     name: "PersonalCenter"
    //   });
    // },
    
    register: function() { //注册
      this.registerShow = true;
      this.verificationCode();
      this.loading = true;
      //注册弹窗QQ 微信 手机 邮箱 是否显示必填
      this.$http.post(this.urlRequest + "?m=api&c=trend&a=getRegInfo").then(res => {
        this.loading = false;
        if (res.data.status == 0) {
          this.OptionalItems = res.data.register;
          if(res.data.state == 0){
              this.Optstate = false;
          }else{
              this.Optstate = true;
          }
        }
      });
    },
    registerCancel: function() { //关闭注册弹框
      this.registerInfo.userName = '';
      this.registerInfo.psd = '';
      this.registerInfo.confirmPsd = '';
      this.registerInfo.qq = '';
      this.registerInfo.weixin = '';
      this.registerInfo.mobile = '';
      this.registerInfo.email = '';
      this.registerInfo.realname = '';
      this.registerInfo.register = '';
      this.registerInfo.referrercode = '';
    },
    verificationCode() { //点击刷新验证码
      var timestamp = new Date().getTime();
      this.codeUrl = this.imgRequest + '?m=web&c=user&a=validatecode&time=' + timestamp;
      console.log(this.codeUrl)
    },
    registerNow(registerInfo) { //立即注册
      this.$refs[registerInfo].validate(valid => {
        if (valid) {
          var params = {
            username: this.registerInfo.userName,
            password: this.registerInfo.psd,
            password2: this.registerInfo.confirmPsd,
            qq: this.registerInfo.qq,
            weixin: this.registerInfo.weixin,
            mobile: this.registerInfo.mobile,
            email: this.registerInfo.email,
            realname: this.registerInfo.realname,
            register: this.registerInfo.register,
            flag: "4",
            code: "123",
            type: "1",
            referrer: this.registerInfo.referrercode
          };
          this.btnLoading = true;
          this.$http.post(this.urlRequest + "?m=api&c=user&a=reg", params).then(res => {
            this.btnLoading = false;
            if (res.data.status == 0) {
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("isLogin", true);
              localStorage.setItem("isUser", true);

              this.$http.post(this.urlRequest + "?m=api&c=user&a=userInfo", {token: res.data.token}).then(res => {
                this.SET_USER_INFO_DATA({
                  Obj : res.data.data
                })
              })

              //注册成功就登录
              localStorage.setItem("userData", JSON.stringify(res.data)); 
              // this.SET_USER_INFO_DATA({
              //   Obj: res.data
              // });
              this.SET_ACCOUNT_DATA({
                Obj: {}
              });
              this.$Message.success("注册成功!");
              this.registerShow = false;
              
              this.SET_ISLOGIN({
                boolean: true
              });

            } else if (res.data.status == 1713) {
              //校验账号是否存在
              this.$refs.username.focus();
              this.userName = this.registerInfo.userName;
              this.$Message.error(res.data.ret_msg);
              var vm = this;
              setTimeout(() => {
                vm.$refs.username.blur();
              }, 20);
              
            } else if (res.data.status == 100022) {
              //校验推荐人
              this.$refs.referrerCode.focus();
              this.referrer = this.registerInfo.referrercode;
              this.$Message.error(res.data.ret_msg);
              var vm = this;
              setTimeout(() => {
                vm.$refs.referrerCode.blur();
              }, 20);
            } else {
              this.$Message.error(res.data.ret_msg);
            }
          }).catch(error => {
            this.btnLoading = false;
            this.$Message.error("数据请求超时");
          });
        }
      });
    },
    closeRegisterBtn: function() { //关闭注册页面
      this.registerShow = false; //注册页面的显示
    },
    login: function() { //跳出登录页面
      this.loginShow = true;
      if(localStorage.getItem("password")){
        this.rememberPsd = true;
      }else{
        this.rememberPsd = false;
      }
    },
    notOpen: function(){
      this.$Message.info('暂未开放，敬请期待QAQ')
    },
    loginNow(loginInfo) { //立即登录
      this.$refs[loginInfo].validate(valid => {
        if (valid) {
          var params = {
            username: this.loginInfo.loginUserName,
            password: this.loginInfo.loginPsd,
            flag: "4",
            code: "1234",
            type: "1",
            openid: "",
            nickname: "",
            avatar: ""
          };
          this.btnLoading = true;
          this.$http.post(this.urlRequest + "?m=api&c=user&a=login", params).then(res => {
            this.btnLoading = false;
            if (res.data.status == 0) {
              this.loginShow = false;
              localStorage.setItem("token", res.data.token);
              localStorage.setItem("isLogin", true);
              localStorage.setItem("isUser", true);
              
              let newUserData = res.data;
							this.$http.post(this.urlRequest + "?m=api&c=user&a=userInfo", {token: res.data.token}).then(res => {
								this.SET_USER_INFO_DATA({
									Obj : res.data.data
								})
								newUserData.honor = res.data.data.honor
                localStorage.setItem("userData", JSON.stringify(newUserData));
              })

              this.SET_ACCOUNT_DATA({
                Obj: {}
              });
              loginStore.commit("changeIsLogin", true);
              this.SET_ISLOGIN({
                boolean: true
              });
              this.$Message.success("登录成功!");
              this.$emit("tipsFunFlag", 1); //平台公告
              this.tipsFun(); //平台公告
              if (this.rememberPsd) {
                localStorage.setItem("userName",this.loginInfo.loginUserName),
                localStorage.setItem("password", this.loginInfo.loginPsd);
              }else{
                localStorage.setItem("password","");
                this.loginInfo.loginPsd = ""
              }
            } else {
              this.$Message.error(res.data.ret_msg);
            }
          }).catch(error => {
            this.btnLoading = false;
            this.$Message.error("数据请求超时");
          });
        } else {
          this.$Message.error("登录失败!");
        }
      });
    },
    tipsFun() { //平台公告
      this.$http.post(this.urlRequest + "?m=win&c=lobby&a=index").then(res=>{
        this.id = res.data.data.popup_msg_id
        this.$http.post('?m=api&c=message&a=detailNoneToken',{id:this.id}).then(res=>{
          if (res.data.list) {
            this.content = res.data.list.content
            this.title = res.data.list.title
            this.addtime = res.data.list.addtime
            this.addtime = formatDate(new Date( this.addtime* 1000), 'yyyy-MM-dd hh:mm') 
            if (res.data.list.is_popup == 1) {
             this.popUp = true;
            }
          }
        })
      })
    },
    exitLogin: function() { //退出登录
      var params = {
        token: localStorage.getItem("token")
      };
      this.$http.post(this.urlRequest + "?m=api&c=user&a=logout", params).then(res => {
        localStorage.removeItem("token");
        this.$Message.success("退出成功！");
        this.SET_USER_INFO_DATA({
          Obj: {}
        });
        this.SET_ACCOUNT_DATA({
          Obj: {}
        })
        this.SET_USER_DATA({
          obj: {}
        });
        this.$router.push({ //跳转到首页
          path: "/home",
          name: "Home"
        });
      });
    },
    closeLoginBtn: function() { //关闭登录页面
      this.loginShow = false; //登录页面弹窗显示
    },
    jumpToRegister: function() { //登录页面跳转到注册页面
      this.loginShow = false;
      this.registerShow = true;
    },
    jumpToLogin: function() { //注册页面跳转到登录页面
      this.registerShow = false;
      this.loginShow = true;
    },
    skipHome(){ //跳转到首页
      this.$router.push({path:'/home'});
    },
    goZouShi: function(){
      window.open(
        this.imgRequest +
          "/pczs/Trendssc/trendHeader.html?trendType=basic&lotteryId=1"
      );
    },
    setQd: function(){ //签到
      if(this.getQdObj.qdState!=0){
        return
      }
      if(!JSON.parse(localStorage.getItem('isUser'))){
        this.$Message.warning('游客暂无权限，请先注册会员')
        return
      }
      if(this.closeQd){
        this.$router.push({
          path: '/taskCenter'
        })
      }
      this.qdLoading=true
      fetchJson(this,'?m=api&c=app&a=taskSign',{type: 7}).then(result=>{
        if(result.status==0){
          var qdObj = this.getQdObj
          qdObj.qdState = 1
          qdObj.qdCurrent +=1
          this.$store.commit('setQdObj',qdObj)
          this.$Modal.success({
            content: '签到成功，恭喜您获得'+this.getQdObj.qdMoney+'元宝！'
          })
          var accountData = this.accountData
          accountData.money_usable=parseFloat(accountData.money_usable)
          accountData.money_usable+=parseInt(this.getQdObj.qdMoney)
          this.SET_ACCOUNT_DATA({
              Obj: accountData
          })
        }else if(result.status==-1){
          this.$Modal.warning({
            content: result.ret_msg
          })
        }
        this.qdLoading=false
      })
    }
  },
  
};
</script>
<style scoped>
.lobbyBox2{width: 330px !important;margin-left: -170px !important;}
.lobbyBox2 .lobby{width: 330px !important;}
.gameLsPanel{z-index: 999;overflow: auto;}
.lobby2{display: none;z-index: 100;max-width: 660px;top: 36px;}
.lobby2>div{flex-wrap: wrap;}
.gameBox{margin: 10px 0px;margin-right: 10px;}
.gameBox:last-child{margin-right: 0px;}
.gameBox img{width: 150px;height: 100px;}
.gameBox button{margin: 0 auto;display: block;width: 100%;}
.last-item {
  margin-bottom: 0;
}
.fadeUp-enter-active {
  transition: all .2s ease;
}
.fadeUp-leave-active {
  transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.fadeUp-enter, .fadeUp-leave-to {
  transform: translateY(30px);
  opacity: 0;
}

.registerInfo-code >>> .ivu-form-item-content {
  padding-right: 115px;
}
.verificationCode {
	position: absolute;
  right: 0;
  top: 1px;
	height: 32px;
}
.head-qd{vertical-align: sub;}
.qdPanel{position: absolute;top: 0px;width: 460px;height: 177px;padding-top: 30px;left: -200px;z-index: 1;cursor: auto;}
.qdPanel>div{background: white;padding: 0px 20px;padding-top: 30px;box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);}
.qdPanel>div:after{
  content: '';
  position: absolute;
  left: 50%;
  top: 22px;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
.qdCtr{display: flex;align-items: center;justify-content: space-between;padding: 10px 5px;border-top: 1px solid #EEEEEE;margin-top: 10px;}
.qdCtr button{width: 80px;}
.qdCtr p{color: #999999;}
.probLoo{
  float: left;
}
.iows{
  border-left: 1px solid #666;
  height: 25px;
  padding: 0px 30p;
  margin: 15px 20px;
}
.content{
  color: rgb(159, 159, 159);
  text-indent:2em;
}
.num-box{
  background: rgba(0, 0, 0, 0.1);
  padding: 0px 15px;
  border-radius:5px; 
  position: relative;
}
.logo-box img:hover{
  cursor:pointer
}

.shadel {
  width: 100%;
  height: 100%;
  background: rgba(0, 0,0,0.6);
  position: fixed;
  z-index: 999;
  top: 0px;
  left: 0px;
}
.popUp {
  width: 600px;
  /* min-height: 360px; */
  background: #FFF;
  position: fixed;
  z-index: 99;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 10px 10px 0 0;
}
.popUpTop{
  width: 100%;
  height: 48px;
  background: #C82834;
  text-align: center;
  line-height: 48px;
  border-radius: 10px 10px 0 0; 
}
.popUpTop h2 {
  color: #fff;
}
.popUpTop .cancel {
  display: inline-block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 14px;
  right: 20px;
  cursor: pointer;
}
.popUpContent {
  padding: 15px 20px;
  height: auto;
}
.popUpContent .h2Title {
  text-align: center;
  color: rgb(100,100,100);
  border-bottom: 1px solid #EEE;
  padding-bottom: 10px;
}
.popUpContent .content {
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
  word-wrap: break-word;
  overflow: auto;
  height: auto;
  min-height: 100px;
  max-height: 290px;
}
.popUpContent .content::-webkit-scrollbar {/*滚动条整体样式*/
  width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 4px;
}
.popUpContent .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: rgba(0,0,0,0.2);
}
.popUpContent .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 0;
  background: rgba(0,0,0,0.1);
}
.popUpContent .addtime {
  text-align: right;
}


.batt{
  border-bottom: 1px solid #EEE;
}
.batt span:hover{
  color: red;
  cursor:pointer
}
.batt h2{
  color: red;
}

header .top-content .userinfo-pop {
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.tologinstyle {
  margin-top: 15px;
}
.ivu-modal-body {
  padding-bottom: 0px;
}
.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.vertical-center-modal .ivu-modal {
  top: 0;
}
header .top-content .user-box .bottom {
  padding: 0 10px;
}
.activeStyle:hover {
  color: #f3596a !important;
}
header .top-content .userinfo-pop {
    position:absolute ;
    left: 0px;
    top: 10px;
    width: 288px;
    height: 122px;
    background-color: #f7f7f7;
    z-index: 1111;
}
.userinfo-popn{
    position: absolute;
    left: -214px;
    top: 30px;
    z-index: 1111;
    display: inline-block;
    width: 288px;
    height: 133px;
}
.btnrecharge , .btngetmoney{
    width: 130px;
    margin-bottom: 8px;
    margin-left: 0px;
}
.prob{
overflow: hidden;
margin-top: 13px;
position: relative;
left: 20px;

}
.prob .por{
  font-size: 15px;
  width: 50px;
}
 .prob .Tpor{
    color: #fff;
    font-size: 14px;
}
.Bpor{
  font-size: 22px;
  color: #fff;
}
.centen{
  margin-left:5px; 
}
.wrapper {       
}
.letter {
  width: 24px;
  display: inline-block;
  vertical-align: middle;
  position: relative; 
  overflow: hidden;
  margin: 0 0;
  font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
  text-transform: uppercase;
  color: #c82834;
}
.letter:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  word-break: break-all;
  background-color: #FFF;
}


.nav-item h2 img{
   height: 30px;
   vertical-align: middle;
}
</style>
<style>
.vertical .ivu-modal .ivu-modal-body {
  padding: 16px 16px 0px 16px;
}
.lobby .ivu-col-span-6 {
    display: block;
    width: 50%;
    line-height: 30px;
}
.lobby .ivu-col-span-12 {
    display: block;
    width: 40%;
    margin-left: 42px;
    margin-top: 15px;
}
.qdPanel .ivu-steps-horizontal .ivu-steps-content{padding-left:5px;margin-left: -10px;margin-top: 10px;}
.qdPanel .ivu-steps-item{left: 15px;}
.qdPanel .ivu-steps-status-finish  .ivu-steps-head-inner{border-color: #C8313C !important;}
.qdPanel .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner span, .ivu-steps-item.ivu-steps-status-finish .ivu-steps-head-inner>.ivu-steps-icon{color: #C8313C;}
.qdPanel .ivu-steps-item.ivu-steps-status-finish .ivu-steps-tail>i:after{background: #C8313C}
.qdPanel .ivu-steps-item.ivu-steps-status-process .ivu-steps-head-inner{background: #C8313C;border-color: #C8313C}
</style>


// WEBPACK FOOTER //
// src/common/public/vueHeader.vue